<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>押品指标监测</title>

    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    <asset:stylesheet src="newMap/collateralIndexMonitor/mbox.css"/>
    <asset:javascript src="newMap/collateralIndexMonitor/mbox.js"/>
    <asset:javascript src="newMap/collateralIndexMonitor/indexMonitor.js"/>
    <asset:stylesheet src="newMap/collateralIndexMonitor/indexMonitor.css"/>
    <asset:javascript src="newMap/libs/gradRender/geostats.js"/>
    %{--<asset:javascript src="newMap/indexMonitor.js"/>--}%
</head>
<body class="fixed-navbar fixed-sidebar">
<asset:javascript src="newMap/collateralIndexMonitor/doIndexMonitor.js"/>
<asset:stylesheet src="newMap/gisMap.css"/>
<style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    @media screen and (max-height:830px){
        #rightTable{
            height: 300px;
        }
        #leftTable{
            height:266px;
        }
        #tabActive{
            bottom: 446px;
        }
        .tableSrcoll{
            max-height: 252px;
            overflow-y: auto;
        }
        .tableSrcoll1{
            max-height: 218px;
            overflow-y: auto;
        }
    }
     .selectContentTop{
         margin-top: 17px;
         position: absolute;
         left: 50%;
         margin-left: -300px;
     }
    .selectContent1{
        width: 100px;
        float: left;
        padding: 10px 0;
        padding-left: 12px;
        cursor: pointer;
        color: #679B43;
    }
    .selectContent1 a{
        color: #679B43!important;
    }
    .selectContent1:hover{
        background: #F3F7EF;
    }
</style>
<div id="allmap" style="position: absolute;">
    <div id='legend1'></div>
    <div class="heatmap">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-title" class="popup-title"></div>
            <div id="popup-content" class="popup-content"></div>
        </div>
    </div>
</div>
<div id='map' style="position: absolute;" ></div>
%{--头部--}%
<div id="bankHeader">
    <div class="bankHeaderLeft pull-left">
        <asset:image src="banking7.png" style="display: block; float: left;width: 38px;"/>
        <div class="logoFont">押品预警系统</div>
        <div style="position: absolute;top: 60px;left: 26px;font-weight: bold;">广东</div>
        <div class="province">
            <asset:image src="banking9.png" style="display: block;float: left;"/>
            <div class="">广东 <span style="position: relative;top: 5px;left: 3px">ˇ</span></div>
        </div>
    </div>
    %{--折叠--}%
    <div class="selectContentTop">
        <div class="">
            <div class="selectContent1">
                <asset:image src="banking25.png" class="tabImage"/>
                <div class="tabFont1"><g:link controller="newMap" action="gisMap">地图</g:link></div>
            </div>
            <div class="selectContent1">
                <asset:image src="banking21.png" class="tabImage"/>
                <div class="tabFont1"><g:link controller="bankingRegulatory" action="index">图表</g:link></div>
            </div>
            <div class="selectContent1">
                <asset:image src="banking27.png" class="tabImage"/>
                <div class="tabFont1"><g:link controller="bankingRegulatory" action="monitor">监测</g:link></div>
            </div>
            <div class="selectContent1">
                <asset:image src="banking23.png" class="tabImage"/>
                <div class="tabFont1"><g:link controller="bankingRegulatory" action="riskWarning">预警</g:link></div>
            </div>
            <div class="selectContent1">
                <asset:image src="banking26.png" class="tabImage"/>
                <div class="tabFont1"><g:link controller="bankingRegulatory" action="report">报告</g:link></div>
            </div>
            %{--<div class="selectContent">--}%
            %{--<asset:image src="banking22.png" class="tabImage"/>--}%
            %{--<div class="tabFont1"><g:link controller="bankingRegulatory" action="developer">开发商</g:link></div>--}%
            %{--</div>--}%
            <div class="selectContent1">
                <asset:image src="banking28.png" class="tabImage"/>
                <div class="tabFont1">用户</div>
            </div>
            <div class="selectContent1">
                <asset:image src="banking24.png" class="tabImage"/>
                <div class="tabFont1">机构</div>
            </div>
        </div>
    </div>
    <div class="bankHeaderRight1 pull-right">
        <div class="userInfo">
            <span style="position: relative;top: 4px;">
                <i class="pe-7s-clock"></i>&nbsp;2018-10-18 09:32:55 <span style="margin: 0 7px;">管理员</span>
            </span>
            <div class="quit">退出</div>
        </div>
        <div class="tabChange">
            <div class="tab tab1">
                <asset:image src="banking12.png" class="tabImage_1"/>
                <asset:image src="banking4.png" class="tabImage_2"/>
                <div class="tabFont"> 核心指标</div>
            </div>
            <div class="tab1Box">
                %{--<div class="nubmer1">押品分布指标数据</div>--}%
                <div class="nubmer2">押品动态抵押率</div>
                <div class="nubmer3">经营性贷款占比数据</div>
                <div class="nubmer4">新楼盘指标数据</div>
                <div class="nubmer5">存量楼盘数据</div>
                <div class="nubmer6">住宅价格指标数据</div>
                <div class="nubmer7">非住宅用房指标数据</div>
                <div class="nubmer8">债偿收入比数据</div>
                <div class="nubmer9">逾期分布数据</div>
            </div>
            <div class="tab tab2">
                <asset:image src="banking17.png" class="tabImage_1"/>
                <asset:image src="banking3.png" class="tabImage_2"/>
                <div class="tabFont"> 押品分布</div>
            </div>
            <div class="tab tab3">
                <asset:image src="banking15.png" class="tabImage_1"/>
                <asset:image src="banking18.png" class="tabImage_2"/>
                <div class="tabFont"> 政策执行</div>
            </div>
            <div class="tab3Box">
                <div class="nubmer">住宅数量</div>
                <div class="zhekou">住宅利率</div>
                <div class="area">住宅面积</div>
                <div class="areaa">住宅区域</div>
            </div>
            %{--<g:link controller="bankingRegulatory" action="monitor">--}%
                %{--<div class="tab tab4">--}%
                    %{--<asset:image src="banking13.png" class="tabImage_1"/>--}%
                    %{--<asset:image src="banking2.png" class="tabImage_2"/>--}%
                    %{--<div class="tabFont"> 风险监测</div>--}%
                %{--</div>--}%
            %{--</g:link>--}%
            %{--<g:link controller="bankingRegulatory" action="riskWarning">--}%
                %{--<div class="tab tab5">--}%
                    %{--<asset:image src="banking14.png" class="tabImage_1"/>--}%
                    %{--<asset:image src="banking20.png" class="tabImage_2"/>--}%
                    %{--<div class="tabFont"> 风险预警</div>--}%
                %{--</div>--}%
            %{--</g:link>--}%
            <div class="tab tab6">
                <asset:image src="banking11.png" class="tabImage_1"/>
                <asset:image src="banking19.png" class="tabImage_2"/>
                <div class="tabFont"> 市场动态</div>
            </div>
            <div class="tab6Box">
                <div class="float">房价浮动</div>
                <div class="buildinga">建筑面积供应量</div>
            </div>
            <div class="tab tab7">
                <asset:image src="banking12.png" class="tabImage_1"/>
                <asset:image src="banking4.png" class="tabImage_2"/>
                <div class="tabFont"> 专题分析</div>
            </div>
            <div class="tab7Box">
                <div>
                    <g:link class="hoverNav" controller="bankingRegulatory" action="bankingStressAnalyze">压力分析</g:link>
                </div>
                <div>押品健康指数</div>
                <div>押品到期还款监测</div>
                <div>开发商风险评价</div>
                <div>自然灾害评价</div>
            </div>
        </div>
    </div>
</div>
%{--菜单--}%
<div id="menus" style="">
    <div style="display: flex;align-items: center;height: 50px;margin-left: 17px;">
        <div style="margin: 0 10px;">银行</div>
        <select style="margin: 0 10px;" name="" id="">
            <option value="">请选择银行</option>
            <option value="">中国银行</option>
            <option value="">建设银行</option>
        </select>
        <div style="margin: 0 10px;"> 时间</div>
        <div class="input-daterange input-group " id="datepicker" style="width:150px; margin:0 10px;">
            <input type="text" class="form-control" placeholder="请选择导入时间"
                   value="${params?.startDate}" name="startDate" id="startDateStart" style="text-align: left;font-size: 12px;"/>
        </div>
        <lable style="margin: 0 10px;">押品类型：</lable>
        <input type="checkbox" value="1000" name="citySelect" class="everyCheckbox i-checks checkBoxValueZhuzhai" checked>
        <div style="margin: 0 10px;">住宅</div>
        <input type="checkbox" value="2000" name="citySelect" class="everyCheckbox i-checks checkBoxValueFeizhuzhai">
        <div style="margin: 0 10px;" >非住宅</div>
        <div class="searcha">查询</div>
        <div class="reseta">重置</div>
    </div>
</div>
%{--图片切换--}%
<div id="tabActive">
    <asset:image src="fool_1.png" class="tabActiveImage tabActiveImage1" title="动态抵押率"/>
    <asset:image src="fool_2.png" class="tabActiveImage tabActiveImage2" title="住宅价格分布"/>
    <asset:image src="fool_3.png" class="tabActiveImage tabActiveImage3" title="逾期分布"/>
    <div class="tabActiveImage11">动态抵押率</div>
    <div class="tabActiveImage22">住宅价格分布</div>
    <div class="tabActiveImage33">逾期分布</div>
</div>
%{--底部图表--}%
<div id="footCharts">
    <div class="footContent footContentClick_1">
        <asset:image src="banking5.png" class="tabImage2" />
        <div class="footShow_1"><section class="">24,989,878个</section></div>
        <div class="clearfix"></div>
        <section class="footShow_2">押品总量</section>
    </div>
    <div class="footContent footContentClick_2">
        <asset:image src="banking5.png" class="tabImage2"/>
        <div class="footShow_1"><section class="">61%</section></div>
        <div class="clearfix"></div>
        <section class="footShow_2">动态抵押率</section>
    </div>
    <div class="footContent footContentClick_3">
        <asset:image src="banking5.png" class="tabImage2"/>
        <div class="footShow_1"><section class="">25461元/㎡</section></div>
        <div class="clearfix"></div>
        <section class="footShow_2">住宅均价</section>
    </div>
</div>
%{--右侧表格--}%
<div id="rightTable">
    <lable class="tableTitle"></lable>
    <div class="tableSrcoll" style="">
    <table cellpadding="1" cellspacing="1" class="table table-striped table-hover text-center" id="leftList">
        <thead>
            %{--<tr>--}%
                %{--<td>城市</td>--}%
                %{--<td>总数量</td>--}%
                %{--<td>住宅</td>--}%
                %{--<td>商业用房</td>--}%
                %{--<td class="text-danger">占押品比例</td>--}%
            %{--</tr>--}%
        </thead>
        <tbody>
            %{--<tr>--}%
                %{--<td>韶关</td>--}%
                %{--<td>1380</td>--}%
                %{--<td>700</td>--}%
                %{--<td>680</td>--}%
                %{--<td class="text-danger">10%</td>--}%
            %{--</tr>--}%
        </tbody>
    </table>
    </div>
</div>
%{--左侧表格--}%
<div id="leftTable">
    <div style="display: flex; justify-content: space-between">
        <lable class="tableTitle"></lable>
        <lable class="closeBtn" style="font-size: 24px;margin: 7px 0; cursor: pointer"><i class="pe-7s-close-circle"></i></lable>
    </div>
    <div class="tableSrcoll1" style="">
        <table cellpadding="1" cellspacing="1" class="table table-striped table-hover text-center" id="">
            <thead class="thead">
            <tr>

            </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
    </div>
</div>
%{--gis图例--}%
<div id="gisShow">
    %{--<section class="divDistance">--}%
        %{--<div class="colorss" style="background:#E1230D;"></div><div class="fontShow">上涨5%</div>--}%
    %{--</section>--}%
    %{--<section class="divDistance">--}%
        %{--<div class="colorss" style="background:#DE6021;"></div><div class="fontShow">上涨10%</div>--}%
    %{--</section>--}%
    %{--<section class="divDistance">--}%
        %{--<div class="colorss" style="background:#E0AF24;"></div><div class="fontShow">上涨15%</div>--}%
    %{--</section>--}%
    %{--<section class="divDistance">--}%
        %{--<div class="colorss" style="background:#AEDB15;"></div><div class="fontShow">下跌5%</div>--}%
    %{--</section>--}%
</div>
<div id="gisShow_1"></div>
<div id="gisShow_2"></div>
<script>
    var dt = [];
    $(function () {
        var cc = [];
        var jy = [];
        var allData = ['荔湾区','越秀区','海珠区','天河区','白云区','黄埔区','番禺区','花都区','南沙区','增城区','从化区'];
        $.ajax({
            type:'GET',
            url: "/assets/main/guangdongData_1.json",
            dataType: "json",
            success: function (msg){
                msg.forEach(function (data) {
                    if(data.WD == "动态抵押率"){
                        dt.push({name:data.CITY_NAME,value:data.CITY_VAL});
                    }else if(data.WD == "债偿收入比"){
                        cc.push({name:data.CITY_NAME,value:data.CITY_VAL});
                    }else if(data.WD == "经营性物业贷款占比"){
                        jy.push({name:data.CITY_NAME,value:data.CITY_VAL});
                    }
                });
                rateList(filterArr(dt))
            }
        });
        //随机数
        function GetRandomNum(Min,Max)
        {
            var Range = Max - Min;
            var Rand = Math.random();
            return(Min + Math.round(Rand * Range));
        }
        //押品分布
        function rateList (data) {
            $('.tableTitle').html('押品分布');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>住宅抵押率</td>\n' +
                '                <td>商业用房抵押率</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+(list.value * 100).toFixed(0)+'%</td>\n' +
                    '                <td>'+(list.value * 100 + 2).toFixed(0) +'%</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+(oneCity.value * 100).toFixed(0)+'%</td><td>'+(oneCity.value * 100 + 2).toFixed(0) +'%</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(55,80)+'%</td>\n' +
                        '                <td>'+GetRandomNum(55,80).toFixed(0) +'%</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
                indexMonitor.invoking();
            })
        };
        //动态抵押率
        function dtList (data) {
            $('.tableTitle').html('动态抵押率');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>住宅抵押率</td>\n' +
                '                <td>商业用房抵押率</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+(list.value * 100).toFixed(0)+'%</td>\n' +
                    '                <td>'+(list.value * 100 + 2).toFixed(0) +'%</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+(oneCity.value * 100).toFixed(0)+'%</td><td>'+(oneCity.value * 100 + 2).toFixed(0) +'%</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(55,80)+'%</td>\n' +
                        '                <td>'+GetRandomNum(55,80).toFixed(0) +'%</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //债偿收入比
        function ccList (data) {
            $('.tableTitle').html('债偿收入比');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>债偿收入比</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+(list.value * 100).toFixed(0)+'%</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+(oneCity.value * 100).toFixed(0)+'%</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(55,80)+'%</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //经营性物业贷款占比
        function jyList (data) {
            $('.tableTitle').html('经营性物业贷款占比');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>经营性物业贷款</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+(list.value * 100).toFixed(0)+'%</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+(oneCity.value * 100).toFixed(0)+'%</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(55,80)+'%</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //楼盘指标
        function buildNum (data) {
            $('.tableTitle').html('楼盘指标');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>住宅楼盘</td>\n' +
                '                <td>非住宅楼盘</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td><td>'+GetRandomNum(30000,50000) +'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //存量楼盘
        function buildStock (data) {
            $('.tableTitle').html('存量楼盘');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>住宅</td>\n' +
                '                <td>非住宅</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td><td>'+GetRandomNum(30000,50000) +'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //住宅价格分布
        function housePrice (data) {
            $('.tableTitle').html('住宅价格');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>一手房价格</td>\n' +
                '                <td>二手房价格</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'/㎡</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000) +'/㎡</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'/㎡</td><td>'+GetRandomNum(30000,50000) +'/㎡</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'/㎡</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000) +'/㎡</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //非住宅用房
        function ishousePrice (data) {
            $('.tableTitle').html('非住宅用房');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>价格</td>\n' +
                '                <td>租金</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td><td>'+GetRandomNum(30000,50000) +'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000) +'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //逾期分布
        function overdue (data) {
            $('.tableTitle').html('逾期分布');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>数量</td>\n' +
                '                <td>时间（天）</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30,500)+'</td>\n' +
                    '                <td>'+GetRandomNum(300,500) +'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30,500)+'</td><td>'+GetRandomNum(30,500) +'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30,500)+'</td>\n' +
                        '                <td>'+GetRandomNum(30,500) +'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //住宅数量和比例
        function buildNumber (data) {
            $('.tableTitle').html('住宅数量和比例');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>首套房</td>\n' +
                '                <td>二套房</td>\n' +
                '                <td>三套房及以上</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(3000,50000)+'</td>\n' +
                    '                <td>'+GetRandomNum(3000,50000) +'</td>\n' +
                    '                <td>'+GetRandomNum(3000,50000) +'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(3000,50000)+'</td><td>'+GetRandomNum(3000,50000) +'</td><td>'+GetRandomNum(3000,50000) +'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(3000,50000)+'</td>\n' +
                        '                <td>'+GetRandomNum(3000,50000) +'</td>\n' +
                        '                <td>'+GetRandomNum(3000,50000) +'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //住宅利率和折扣
        function zhekou (data) {
            $('.tableTitle').html('住宅利率和折扣');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>经营性物业贷款</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(5,10)+'%</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(5,10)+'%</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(5,10)+'%</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //住宅面积
        function buildSquare (data) {
            $('.tableTitle').html('住宅面积');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>面积（平方米）</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //住宅区域
        function buildSquarea (data) {
            $('.tableTitle').html('住宅区域');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>区域分布数量</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //房价浮动
        function housingFloat (data) {
            $('.tableTitle').html('房价浮动');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>房价变动数量</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //建筑面积供应量
        function housingSquare (data) {
            $('.tableTitle').html('建筑面积供应量');
            var html = '<tr>\n' +
                '                <td>城市</td>\n' +
                '                <td>供应面积（平方米）</td>\n' +
                '            </tr>';
            $('#leftList thead').html(html);
            var tbody;
            var oneCity;
            data.forEach(function (list) {
                if(list.name == '广州市'){
                    oneCity = list;
                }
                tbody += '<tr>\n' +
                    '                <td>'+list.name+'</td>\n' +
                    '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                    '            </tr>'
            });
            $('#leftList tbody').html(tbody);
            $("#leftList tbody").prepend('<tr><td><a class="headClick">'+oneCity.name+'</a></td><td>'+GetRandomNum(30000,50000)+'</td></tr>');
            $('.headClick').click(function () {
                var tbody = '';
                $('#leftTable').animate({left: '10px'})
                $('#leftTable .thead').html(html);
                allData.forEach(function (list) {
                    tbody += '<tr>\n' +
                        '                <td>'+list+'</td>\n' +
                        '                <td>'+GetRandomNum(30000,50000)+'</td>\n' +
                        '            </tr>'
                })
                $('#leftTable .tbody').html(tbody);
            })
        };
        //数组去重
        function filterArr (arr) {
            var result = [];
            for(var i = 0; i < arr.length; i++){
                for(var j = i+1;j < arr.length; j++){
                    if(arr[i].name === arr[j].name){
                        j = ++i;
                    }
                }
                result.push(arr[i]);
            }
            return result;
        }
        $('#datepicker').datepicker({
            language: 'zh-CN'
        });
        //table关闭按钮
        $('#leftTable .closeBtn').click(function () {
            $('#leftTable').animate({left: '-370px'})
        })
        $("#datepicker").on("changeDate", function (event) {
            $("#my_hidden_input").val(
                $("#datepicker").datepicker('getFormattedDate')
            )
        });
        $('.input-group.date').datepicker({});
        $('.input-daterange').datepicker({});

        $("#datepicker").on("changeDate", function (event) {
            $("#my_hidden_input").val(
                $("#datepicker").datepicker('getFormattedDate')
            )
        });
        mbox.init();
        indexMonitor.init();


//查询
        $('.searcha').click(function () {
            if($(".checkBoxValueZhuzhai").prop('checked' ) && $(".checkBoxValueFeizhuzhai").prop('checked')){
                indexMonitor.searchClick('hous',1000,2000);
            }else if($(".checkBoxValueZhuzhai").prop('checked') ){
                indexMonitor.searchClick('hous',1000)
            }
            else if($(".checkBoxValueFeizhuzhai").prop('checked')){
                indexMonitor.searchClick('hous',2000)
            }
        })

    //
    $(".buildinga").click(function () {
        housingSquare(filterArr(dt));
        indexMonitor.gisMapClick(20);
        $(".tab6Box").hide();
    })
    $(".float").click(function () {
        housingFloat(filterArr(dt));
        indexMonitor.gisMapClick(19);
        $(".tab6Box").hide();
    })
    $(".nubmer9").click(function () {
        overdue(filterArr(dt))
        indexMonitor.gisMapClick(15);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer8").click(function () {
        ccList(filterArr(dt));
        indexMonitor.gisMapClick(5);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer7").click(function () {
        ishousePrice(filterArr(dt))
        indexMonitor.gisMapClick(18);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer6").click(function () {
        housePrice(filterArr(dt))
        indexMonitor.gisMapClick(17);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer5").click(function () {
        buildStock(filterArr(dt))
        indexMonitor.gisMapClick(16);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer4").click(function () {
        buildNum(filterArr(dt));
        indexMonitor.gisMapClick(7);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer3").click(function () {
        jyList(filterArr(dt));
        indexMonitor.gisMapClick(6);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer2").click(function () {
        dtList(filterArr(dt));
        indexMonitor.gisMapClick(2);
        $(".tab1Box").hide();
    })
    //
    $(".nubmer1").click(function () {
        rateList(filterArr(dt));
        indexMonitor.gisMapClick(1);
        $(".tab1Box").hide();
    })
//
    $(".nubmer").click(function () {
        buildNumber(filterArr(dt));
        indexMonitor.gisMapClick(9);
        $(".tab3Box").hide();
    })
//  住宅利率和折扣
    $(".zhekou").click(function () {
        zhekou(filterArr(dt))
        indexMonitor.gisMapClick(10);
        $(".tab3Box").hide();
    })
//  区域
    $(".areaa").click(function () {
        buildSquarea(filterArr(dt))
        indexMonitor.gisMapClick(12);
        $(".tab3Box").hide();
    })
//  面积
    $(".area").click(function () {
        buildSquare(filterArr(dt))
        indexMonitor.gisMapClick(11);
        $(".tab3Box").hide();
    })
//  动态抵押率
    $(".tabActiveImage1").click(function () {
        dtList(filterArr(dt))
        indexMonitor.gisMapClick(2)
    })
//  住宅价格分布
    $(".tabActiveImage2").click(function () {
        housePrice(filterArr(dt))
        indexMonitor.gisMapClick(3)
    })
//  逾期分布
    $(".tabActiveImage3").click(function () {
        overdue(filterArr(dt))
        indexMonitor.gisMapClick(15)
    })
//  押品总量
    $(".footContentClick_1").click(function () {
        rateList(filterArr(dt))
        indexMonitor.gisMapClick(1)
    })
//  押品分布
    $(".tab2").click(function () {
        rateList(filterArr(dt));
        indexMonitor.gisMapClick(1)
        $(".tab1Box").hide();
        $(".tab3Box").hide();
        $(".tab6Box").hide();
        $(".tab7Box").hide();
    })
//  动态抵押率
    $(".footContentClick_2").click(function () {
        dtList(filterArr(dt))
        indexMonitor.gisMapClick(2)
    })
//  住宅均价
    $(".footContentClick_3").click(function () {
        housePrice(filterArr(dt))
        indexMonitor.gisMapClick(3)
    })
//  划过更换图片
    $(".tab").hover(function () {
        $(this).children(".tabImage_1").hide();
        $(this).children(".tabImage_2").show();
    },function () {
        $(this).children(".tabImage_2").hide();
        $(this).children(".tabImage_1").show();
    })
//  导航点击事件
    $(".tab1").click(function () {
        $(".tab1Box").toggle();
        $(".tab3Box").hide();
        $(".tab6Box").hide();
        $(".tab7Box").hide();
    })
    $(".tab3").click(function () {
        $(".tab3Box").toggle();
        $(".tab1Box").hide();
        $(".tab6Box").hide();
        $(".tab7Box").hide();
    })
    $(".tab6").click(function () {
        $(".tab6Box").toggle();
        $(".tab1Box").hide();
        $(".tab3Box").hide();
        $(".tab7Box").hide();
    })
    $(".tab7").click(function () {
        $(".tab7Box").toggle();
        $(".tab1Box").hide();
        $(".tab3Box").hide();
        $(".tab6Box").hide();
    })

        var checkAll = $('.allCheckbox');  //全选的input
        var checkboxs = $('.everyCheckbox'); //所有单选的input
        checkAll.on('ifChecked ifUnchecked', function (event) {
            if (event.type == 'ifChecked') {
                checkboxs.iCheck('check');
            } else {
                checkboxs.iCheck('uncheck');
            }
        });
        checkboxs.on('ifChanged', function (event) {
            if (checkboxs.filter(':checked').length == checkboxs.length) {
                checkAll.prop('checked', true);
            } else {
                checkAll.prop('checked', false);
            }
            checkAll.iCheck('update');
        });

    })
</script>
</body>
</html>
